<template>
    <div class="wrapper">
        <div class="content">
            <van-cell-group>
                <van-cell title="入网费率" @click="showBottom = true" :value="rate?rate:'请选择入网费率'" is-link/>
            </van-cell-group>
        </div>
        <van-action-sheet   @cancel="onCancel" cancel-text="取消" v-model:show="showBottom" :actions="sateList" @select="onSelect" />
        <div class="confirm" @click="subPosFeeConfigBatch">修 改</div>
    </div>
</template>


<script setup>
import { terminalFeeInterval,posFeeConfigBatch } from "../../api/posManagement"
import store from '../../store'
import { showToast } from 'vant';
import { showSuccessToast } from "vant"
const showBottom = ref(false)
const sateList = ref([])
const rate = ref(null)
const router = useRouter()
const getTerminalFeeInterval = ()=>{
    terminalFeeInterval().then(res=>{
        sateList.value = res.object.map(item=>{
            return{
                name:item
            }
        })
    })
}
const subPosFeeConfigBatch = ()=>{
    if(!rate.value){
        showToast('请选择入网费率')
        return
    }
    posFeeConfigBatch({
        tusnList:store.state.data.POSTUSN,
        mercIncrFee:rate.value,
    }).then(res=>{
        showSuccessToast('修改成功')
        setTimeout(()=>{
            router.go(-1)
        },2000)
    })
}
const onSelect = (item) => {
    rate.value = item.name
    showBottom.value = false;

};
const onCancel = () =>{
    showBottom.value = false;
}
getTerminalFeeInterval()
</script>
<style scoped lang="scss">
.wrapper{
    padding: 10px;
}
.content{
    border-radius: 10px;
    overflow: hidden;
}
.confirm {
    width: 160px;
    height: 40px;
    background: #446aff;
    border-radius: 7px;
    font-size: 14px;
    //font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    margin: 100px auto 0;
    text-align: center;
    line-height: 40px;
}
</style>
